﻿<%@ Page Title="Servicentro San Luis" Language="C#" MasterPageFile="~/Site.Master"
    AutoEventWireup="true" CodeBehind="Faltantes.aspx.cs" Inherits="Gui.Web.Reportes.Faltantes" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="area-top clearfix">
                <div class="pull-left header">
                    <h3 class="title">
                        <i class="icon-tint"></i>Faltantes</h3>
                    <h5>
                        Reporte de faltantes</h5>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid padded">
        <table width="100%">
            <tr>
                <td>
                    <label>
                        Seleccione A&ntilde;o:</label>
                    <asp:DropDownList ID="Anios" runat="server" AutoPostBack="True" DataMember="IdAnio"
                        DataValueField="IdAnio" DataTextField="IdAnio" class="uniform" name="colors"
                        Width="30%" OnSelectedIndexChanged="Anio_SelectedIndexChanged">
                    </asp:DropDownList>
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    <label>
                        Seleccione mes de inicio:</label>
                    <asp:DropDownList ID="MesInicio" runat="server" AutoPostBack="True" DataMember="NombreMes"
                        DataValueField="IdMes" DataTextField="NombreMes" class="chzn-select" name="colors"
                        Width="30%" OnSelectedIndexChanged="MesInicio_SelectedIndexChanged">
                    </asp:DropDownList>
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    <label>
                        Seleccione mes de fin:</label>
                    <asp:DropDownList ID="MesFin" runat="server" AutoPostBack="True" DataMember="NombreMes"
                        DataValueField="IdMes" DataTextField="NombreMes" class="chzn-select" name="colors"
                        Width="30%" OnSelectedIndexChanged="MesFin_SelectedIndexChanged">
                    </asp:DropDownList>
                </td>
            </tr>
        </table>
        <br />
        <div class="box">
            <div class="box-header">
                <span class="title">Reporte de faltantes acumulados por mes (En soles)</span>
            </div>
            <div class="box-content padded" id="faltantes-titulo">
                <div id="chartContainer" style="height: 300px; width: 100%;">
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box-header">
                <span class="title">Resumen de Faltantes</span>
                <ul class="box-toolbar">
                    <li>
                        <asp:Label ID="TotalTitulo" runat="server" class="label label-blue" Text="Total: S/. 200.00"></asp:Label></li>
                </ul>
            </div>
            <div class="box-content">
                <asp:GridView ID="DatosDeFaltantesSobrantes" class="table table-bordered table-striped responsive"
                    runat="server">
                </asp:GridView>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            $(function () {
                $.ajax({
                    type: "POST",
                    url: "Faltantes.aspx/ObtenerDatosChart",
                    data: "{ anio: " + ObtenerAnio('<%= Anios.ClientID %>') +
                           ", mesInicio:" + Seleccionar('<%= MesInicio.ClientID %>') + 
                           ", mesFin:" + Seleccionar('<%= MesFin.ClientID %>') + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        if (data.d != null && data.d != '') {
                            var json = eval("(" + data.d + ")");
                            var chart = new CanvasJS.Chart("chartContainer", json);
                            chart.render();
                        }
                    }
                });
            });
        };

        function Seleccionar(dropDownList) {
            var ddlMes = document.getElementById(dropDownList);
            return ddlMes.selectedIndex + 1;
        }

        function ObtenerAnio(dropDownList) {
            var ddlAnio = document.getElementById(dropDownList);
            return ddlAnio.options[ddlAnio.selectedIndex].text;
        }
    </script>
</asp:Content>
